<template>
	
	<view>
		<u-toast ref="uToast"></u-toast><!-- 弹窗 -->
		
		<view class="flow-sticky">
		
			<!-- 自定义标题  -->
			<u-navbar :is-back="true" :custom-back="goBack">
				<view style="font-size:18px;font-weight: bold;margin:0px auto">{{title}}</view>
			</u-navbar>
		
			<!-- 标签 这里的name指向的是tabs里的name,因为数据可能是后端给到的，例如 name='cate_name' tabs:[{cate_name:'表单信息'}]-->
			<u-tabs name="name" :list="tabs" :is-scroll="false" :current="current" @change="tabsChange" bar-width="60"
				bar-height="6"></u-tabs>
		
			<!-- 状态信息 -->
			<div class="flow-urgent-value" :style="{'background-color':flowUrgentList[selectflowUrgent.extra].bgColor}">
				<span :style="{'color':flowUrgentList[selectflowUrgent.extra].color}">{{selectflowUrgent.label}}</span>
			</div>
		</view>
		

		<block>
			<view v-show="tabsName === '表单信息'">
				<!-- 引用其他页面可以给其他页面加属性props传值，并且其他页面的接口要在mounted挂载里才能调用 -->
				<EngineForm ref='reviewedit' :engineId='id' :encode='encode'
					:flowId="flowId"></EngineForm>
			</view>
		
			<view class="nodeList-v" v-show="tabsName === '流程信息'">
				<steps :options="stepList" />
			</view>
		
			<view class="record-v" v-show="tabsName === '流转记录'">
				<records :options="recordList" :endTime="endTime" />
			</view>
		
		</block>
	</view>
	
</template>

<script>
	import {
		getFlowBefore
	} from '@/api/q1/workFlow/Engine/engine.js'
	import EngineForm from '../Engine/EngineForm.vue'
	import steps from '@/pages/workFlow/components/steps.vue' // steps的字段要与接口传回来的一致,数据不对要检查
	import records from '@/pages/workFlow/components/records.vue'
	export default {
		components: {
			EngineForm,
			steps,
			records
		},
		data() {
			return {
				title:'',// 标题
				current: 0, // 默认激活的标签
				tabsName: '表单信息', // 默认激活标签名称
				tabs: [{
					name: '表单信息'
				}, {
					name: '流程信息'
				}, {
					name: '流转记录',
				}],
				selectflowUrgent: {
					extra: '0',
					label: '普通',
					value: 1,
				},
				flowTaskInfo: {},
				flowUrgentList: [{
						label: '普通',
						color: '#409EFF',
						bgColor: '#e5f3fe',
						value: 1,
						extra: '0'
					},
					{
						label: '重要',
						color: '#E6A23C',
						bgColor: '#fef6e5',
						value: 2,
						extra: '1'
					},
					{
						label: '紧急',
						color: '#F56C6C',
						bgColor: '#fee5e5',
						value: 3,
						extra: '2'
					},
				],
				tabsTemporary: [],
				stepList: [], // 流程信息
				recordList: [], // 流转记录
				endTime: 0,
				encode:'',
				flowId:'',
				taskNodeId:'',
				taskOperatorId:''
			}
		},
		
		onLoad(option) {
			
			if(option.params != null){
				console.log('option.params')
				const json = JSON.parse(option.params);
				this.id = json.id;
				this.encode = json.enCode;
				this.flowId = json.flowId;
				this.init();
			}else if(option.config != null){
				console.log('option.config')
				const config = JSON.parse(option.config)
				this.id = config.id
				this.taskNodeId = config.taskNodeId
				this.taskOperatorId = config.taskId
				this.title = config.title
				console.log('id:' + this.id + ',taskNodeId:' + this.taskNodeId + ',taskOperatorId:' + this.taskOperatorId)
				this.init();
			}
			
		},
		methods: {
			
			// 初始化
			init(){
				
				const data = {
					taskNodeId:this.taskNodeId,
					taskOperatorId:this.taskOperatorId
				}
				getFlowBefore(this.id, data).then(res => {
					if(res.code == 200){
						
						this.stepList = res.data.flowTaskNodeList; // 流程信息
						this.recordList = res.data.flowTaskOperatorRecordList; // 流转记录
						this.endTime = res.data.flowTaskInfo.completion == 100 ? res.data.flowTaskInfo.endTime : 0;
						
						// 状态
						this.flowTaskInfo = res.data.flowTaskInfo;
						// 返回需要的obj对象
						const getSelectInfo = () => {
							var obj = {
								value: this.flowTaskInfo.flowUrgent,
								extra: '',
								label: ''
							}
							this.flowUrgentList.forEach((e, i) => {
								if (e.value == this.flowTaskInfo.flowUrgent) {
									obj.extra = i
									obj.label = e.label
								}
							})
							return obj;
						}
						this.selectflowUrgent = getSelectInfo()
						this.title = this.flowTaskInfo.fullName
						if (this.flowTaskInfo.status !== 0 && this.flowTaskInfo.status !== 3) {
							this.title = this.flowTaskInfo.thisStep ? this.flowTaskInfo.fullName + '/' + this
								.flowTaskInfo
								.thisStep : this.flowTaskInfo.fullName
						}
						
					}
				}).catch((err) => {
					console.log('error:' + err)
				});
			},
			
			// 标签切换
			tabsChange(index) {
				this.current = index;
				this.tabsName = this.tabs[index].name;
			},
			// 导航栏返回
			goBack() {
				uni.navigateBack({
					url: '/pages/workFlow/flowTodo/index'
				});
			}	
		}	
	}
	
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
	}
	
	// 不随滚动条滚动
	.flow-sticky {
		position: sticky;
		top: var(--window-top);
		z-index: 200;
	}
	
	// 状态样式
	.flow-urgent-value {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60rpx;
		font-size: 28rpx;
	}
	
	.nodeList-v,
	.record-v {
		padding: 32rpx 32rpx 10rpx;
		background-color: #fff;
	}
</style>